<template>
  <div>
    <el-row>
      <p>当加解密方式不需要密码时, 密码可不填写</p>
      <el-radio-group v-model="method">
        <el-radio label="base64" />
        <el-radio label="hex"/>
        <el-radio label="encodeUrl"/>
        <el-radio label="encodeUrlComponent"/>
        <el-radio label="escape"/>
        <el-radio label="AES" />
        <el-radio label="DES" />
        <el-radio label="TripleDES" />
      </el-radio-group>
    </el-row>

    <!-- 功能操作区 -->
    <el-row class="margin-top ">
      <el-form :inline="true" size="small">
        <el-form-item label="密码">
          <el-input size="small" clearable v-model="password" />
        </el-form-item>
        <el-form-item label="方式">
          <el-button-group>
            <el-button size="small" type="primary" @click="encryptText">加密</el-button>
            <el-button size="small"  @click="decryptText">解密</el-button>
            <el-button size="small"  @click="emptyText">清空</el-button>
          </el-button-group>
        </el-form-item>
      </el-form>
    </el-row>

    <el-row>
      <el-col :span="12" class="padding">
        <el-input
          v-model="plainText"
          type="textarea"
          :autosize="{ minRows: 10, maxRows: 30}"
          placeholder="这里输入明文"
        />
      </el-col>
      <el-col :span="12" class="padding">
        <el-input
          v-model="secretText"
          type="textarea"
          :autosize="{ minRows: 10, maxRows: 30}"
          placeholder="这里输入密文"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CryptoJS from 'crypto-js'

export default {
  name: 'encrypt',
  data(){
    return {
      method: 'base64',
      plainText: null,
      secretText: null,
      password: 'password'
    }
  },
  methods: {
    encryptText(){
      if (!this.plainText){
        this.$message('输入明文后继续')
        return ;
      }

      let plainTextUtf8 = CryptoJS.enc.Utf8.parse(this.plainText);
      switch (this.method){
        case 'base64':
          this.secretText = CryptoJS.enc.Base64.stringify(plainTextUtf8)
          break;
        case 'AES':
        case 'DES':
        case 'TripleDES':
          this.secretText = CryptoJS[this.method].encrypt(this.plainText,this.password).toString()
          break
        case 'hex':
          this.secretText = CryptoJS.enc.Hex.stringify(plainTextUtf8)
          break;
        case 'encodeUrlComponent':
          this.secretText = encodeURIComponent(this.plainText);
          break;
        case 'encodeUrl':
          this.secretText = encodeURI(this.plainText);
          break;
        case 'escape':
          this.secretText = escape(this.plainText)
      }
    },
    decryptText(){
      if (!this.secretText){
        this.$message('输入密文后继续')
        return ;
      }

      switch (this.method){
        case 'base64':
          this.plainText = CryptoJS.enc.Base64.parse(this.secretText).toString(CryptoJS.enc.Utf8)
          break;
        case 'AES':
        case 'DES':
        case 'TripleDES':
          this.plainText = CryptoJS[this.method].decrypt(this.secretText).toString(CryptoJS.enc.Utf8)
          break
        case 'hex':
          this.plainText = CryptoJS.enc.Hex.parse(this.secretText).toString(CryptoJS.enc.Utf8)
          break
        case 'encodeUrlComponent':
          this.plainText = encodeURIComponent(this.secretText);
          break
        case 'encodeUrl':
          this.plainText = encodeURI(this.secretText);
          break
        case 'escape':
          this.plainText = escape(this.secretText)
      }
    },
    emptyText(){
      this.plainText = null;
      this.secretText = null;
    }
  }
}
</script>


